<template>
  <view class="container">
    <view class="search">
      <search class="fl2 search-input" :val.sync="keyword" @change="goSearch" />
      <view class="filter" @tap="showFilter"> <image src="/static/image/filter.png" mode="widthFix" /></view>

      <view class="primary_btn" @tap="add"> 新增 </view>
    </view>
    <u-list @scrolltolower="scrolltolower">
      <u-list-item v-for="(item, index) in list" :key="index">
        <view class="item-wrap" @click="goDetail(item)">
          <view class="flex justify-content-between">
            <view class="time">{{ item.createTime }}</view>
            <view class="status" :class="item.orderStatus === 'SAVE' ? 'green' : item.orderStatus === 'PASS' ? 'blue' : 'red'">{{ item.orderStatus === 'SAVE' ? '保 存' : item.orderStatus === 'PASS' ? '审 核' : '关 闭' }}</view>
          </view>
          <view class="client">{{ item.customerName ? item.customerName : '' }}</view>
          <view class="cost">￥{{ item.taxAmount }}</view>
          <view class="name"
            >{{ item.userName }} <text style="color: #888; font-size: 26rpx; margin-left: 10rpx">{{ item.deptName ? item.deptName : '' }}</text>
          </view>
          <u-line margin="20rpx 0rpx"></u-line>
          <view class="tip">备注:{{ item.remark }}</view>
        </view>
      </u-list-item>
    </u-list>
    <filter-pop ref="filterPop" :userList="userList" @submit="refreshFilter"></filter-pop>
  </view>
</template>

<script>
import pageMixin from '@/mixins/pageMixin'
import { expenseApplyList, expenseApply } from '@/service/api/pay'
import Search from '@/components/search.vue'
import filterPop from '../../components/filter-pop.vue'
import { getSysUserList } from '@/service/api/logistics'
export default {
  name: 'list',
  mixins: [pageMixin],
  components: {
    Search,
    filterPop,
  },
  data() {
    return {
      keyword: '',
      size: 999,
      page: 1,
      list: [],
      end: false,
      userList: [],
    }
  },
  onShow() {
    uni.$on('refreshCostData', res => {
      if (res.refresh) {
        //更新数据
        this.refreshData()
      }
    })
  },
  created() {},
  mounted() {},
  onLoad() {
    this.getExpenseList()
    this.getUserList()
  },
  methods: {
    refreshFilter(data) {
      console.log(data)
      this.end = false
      this.page = 1
      this.list = []
      this.getExpenseList(data.data)
    },
    showFilter() {
      this.$refs.filterPop._show()
    },
    getUserList() {
      const _this = this
      getSysUserList()
        .then(res => {
          _this.userList.push(res.content)
        })
        .catch(err => {
          uni.showToast({
            title: err.msg,
            icon: 'none',
          })
        })
    },
    goSearch() {
      console.log(this.keyword)
      this.refreshData()
    },
    refreshData() {
      this.end = false
      this.page = 1
      this.list = []

      this.getExpenseList()
    },
    add() {
      uni.navigateTo({
        url: `/packagePurchase/pages/cost/expenseApply`,
      })
    },
    goDetail(item) {
      uni.navigateTo({
        url: `/packagePurchase/pages/cost/expenseApply?id=` + item.id,
      })
    },
    getExpenseList(filterParam) {
      const _this = this
      const data = {
        size: this.size,
        page: this.page,
        sort: 'id desc',
        keyword: this.keyword,
      }
      let mergeObj = data
      if (filterParam) {
        mergeObj = { ...data, ...filterParam }
      }
      this.uniShowLoading()
      expenseApplyList(mergeObj)
        .then(res => {
          this.uniHideLoading()
          uni.stopPullDownRefresh()
          console.log(res)
          if (res.data.content.length < this.size) this.end = true
          this.list = this.list.concat(res.data.content)
        })
        .catch(err => {
          this.uniHideLoading()
          uni.stopPullDownRefresh()
        })
    },
    scrolltolower() {
      console.log('end=' + this.end)
      if (this.end) return
      this.page++
      this.getExpenseList()
    },
    onPullDownRefresh() {
      this.refreshData()
    },
  },
}
</script>
<style scoped lang="scss">
.container {
  background-color: #f4f5f9;
  padding: 20rpx 0;
  font-size: 28rpx;
  .search {
    display: flex;
    align-items: center;
    margin: 0 20rpx;
    .search-input {
      margin-right: 20rpx;
    }
    .filter {
      margin: 0 20rpx;
      image {
        width: 70rpx;
      }
    }
    .primary_btn {
      flex: 1;
      height: 80rpx;
    }
  }
  .item-wrap {
    background-color: white;
    border-radius: 10rpx;
    margin: 20rpx 20rpx 0;
    padding: 20rpx;

    .time,
    .tip {
      font-size: 26rpx;
      color: #888;
    }
    .status {
      font-size: 24rpx;
      border-radius: 10rpx;
      padding: 8rpx 20rpx;
    }
    .blue {
      background-color: #eff7ff;
      color: #1a8bff;
    }
    .green {
      background-color: #e2f9f2;
      color: #1acd9a;
    }
    .red {
      background-color: #ffedee;
      color: #ff5967;
    }
    .client {
      font-weight: bold;
      font-size: 30rpx;
      margin: 10rpx 0;
    }
    .cost {
      color: #ff8324;
    }
    .name {
      text-align: right;
    }
  }
}
</style>
